<template>
    <div id="set-meal">
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="套餐管理" name="first">
                <el-table
                        :data="tableData"
                        style="width: 100%">
                    <el-table-column
                            label="套餐图片">

                        <template slot-scope="scope">
                            <el-image  style="width: 100px; height: 100px" :src="scope.row.menuImg" ></el-image>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="menuName"
                            label="套餐名称"
                            width="180">

                    </el-table-column>
                    <el-table-column
                            prop="menuPrice"
                            label="套餐价格"
                            width="180">
                    </el-table-column>
                    <el-table-column label="套餐状态">
                        <template slot-scope="scope">
                            <el-button v-if="scope.row.menuState==1"
                                       size="mini">正常</el-button>
                            <el-button  v-if="scope.row.menuState==0"
                                        size="mini"
                                        type="danger">要求退款</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="menuCount"
                            label="套餐月销"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="dishTypeName"
                            label="分类"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="recommend"
                            label="是否推荐到主页"
                            width="180">
                    </el-table-column>
                    <el-table-column label="操作" width="260">
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    @click="dialogs=true,xiugai(scope.row.menuId)">编辑</el-button>
                            <el-dialog title="修改套餐信息" :visible.sync="dialogs">
                                <ul>
                                    <li>套餐名称:
                                        <el-input v-model="taocan.menuName" placeholder="请输入内容"></el-input>
                                    </li>
                                    <li>套餐价格:
                                        <el-input v-model="taocan.menuPrice" placeholder="请输入内容"></el-input>
                                    </li>
                                    <li>套餐状态:
                                        <el-input v-model="taocan.menuState" placeholder="请输入内容"></el-input>
                                    </li>
                                    <li>套餐月销:
                                        <el-input v-model="taocan.menuCount" placeholder="请输入内容"></el-input>
                                    </li>
                                    <li>套餐分类:
                                        <el-select v-model="taocan.dishTypeId" placeholder="请选择">
                                            <el-option
                                                    v-for="item in options"
                                                    :key="item.dishTypeId"
                                                    :label="item.dishTypeName"
                                                    :value="item.dishTypeId">
                                            </el-option>
                                        </el-select>
                                    </li>
                                    <li>是否推荐:
                                        <el-input v-model="taocan.recommend" placeholder="请输入内容"></el-input>
                                    </li>
                                </ul>
                                <div slot="footer" class="dialog-footer">
                                    <el-button @click="dialogs = false">取 消</el-button>
                                    <el-button type="primary" @click="dialogs = false,upda()">确 定</el-button>
                                </div>
                            </el-dialog>
                            <el-button
                                    size="mini"
                                    type="danger"
                                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="block">
                    <el-pagination
                            background
                            @size-change="feny()"
                            @current-change="feny()"
                            layout="prev, pager, next"
                            :current-page.sync="saleQueryBo.page.current"
                            :page-size.sync="saleQueryBo.page.size"
                            :page-sizes="[5, 10, 15, 20, 25]"
                            :total="totalData">
                    </el-pagination>
                </div>
            </el-tab-pane>
            <el-tab-pane label="套餐操作" name="second">套餐操作</el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
    export default {
        name: "SetMeal",
        data() {
            return {
                dialogs:false,
                activeName: 'first',
                tableData: [],
                currentPage1: 5,
                totalData:null,
                saleQueryBo:{
                    page:{
                        size:2,
                        curre:1
                    }
                },
                taocan:{
                    menuName:null,
                    menuPrice:null,
                    menuState:null,
                    menuCount:null,
                    dishTypeId:null,
                    recommend:null,
                    menuId:null
                },
                options:{}
            };
        },
        methods: {
            xiugai(eid){
                this.taocan.menuId=eid
                this.$axios.post("administration/menu/queryId",eid).then(response=>{
                    if (response.data!=null){
                        this.taocan=response.data
                    }
                })
            },
            upda(){

                this.$axios.post("administration/menu/queryUp",this.taocan).then(response=>{
                    if (response.data!=0){
                        alert("修改成功")
                        this.all()
                    }
                })
            },
            feny(){
                this.$axios.post("administration/menu/queryAll",this.saleQueryBo).then(response=>{
                    if (response.data!=null){
                        this.tableData=response.data.records
                        this.totalData=response.data.total
                    }
                })
            },
            all(){
                this.$axios.post("administration/menu/queryAll",this.saleQueryBo).then(response=>{
                    if (response.data!=null){
                        this.tableData=response.data.records
                        this.totalData=response.data.total
                    }
                })
            }
        },
        mounted() {
            this.$axios.post("administration/menu/queryAll",this.saleQueryBo).then(response=>{
                if (response.data!=null){
                    this.tableData=response.data.records
                    this.totalData=response.data.total
                }
            })
            this.$axios.post("administration/menu/findlist").then(response=>{
                if (response.data!=null){
                    this.options=response.data
                }
            })
        }
    }
</script>

<style scoped>
    #set-meal{
        width: 97em;
    }
    .block{
        margin-left: 33%;
    }
    #img img{
        border-radius: 15px;
    }
    ul li{
        list-style: none;
    }
</style>